<template>
  <div>
    <h1>订单详情</h1>
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="订单号">
        <el-input class="ipt" v-model="form.name" :disabled="true"></el-input>
      </el-form-item>
      <el-form-item label="创建时间">
        <el-input class="ipt" v-model="form.type" :disabled="true"></el-input>
      </el-form-item>
      <el-form-item label="收件人">
        <el-input class="ipt" v-model="form.type1" :disabled="true"></el-input>
      </el-form-item>
      <el-form-item label="订单状态">
        <el-input class="ipt" v-model="form.type2" :disabled="true"></el-input>
      </el-form-item>
      <el-form-item label="支付方式">
        <el-input class="ipt" v-model="form.one" :disabled="true"> </el-input>
      </el-form-item>
      <el-form-item label="订单金额">
        <el-input class="ipt" v-model="form.two" :disabled="true"></el-input>
      </el-form-item>
    </el-form>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="productImage" label="商品图片">
        <template slot-scope="scope">
          <img
            :src="form.img + scope.row.productImage"
            style="width: 100px; height: 100px"
            alt=""
          />
        </template>
      </el-table-column>
      <el-table-column prop="productName" label="商品信息"> </el-table-column>
      <el-table-column prop="currentUnitPrice" label="单价">
        <template slot-scope="scope">
          {{ scope.row.currentUnitPrice | money }}
        </template>
      </el-table-column>
      <el-table-column prop="quantity" label="数量"> </el-table-column>
      <el-table-column prop="totalPrice" label="合计">
        <template slot-scope="scope">
          {{ scope.row.currentUnitPrice | money }}
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { order2 } from "../../http/index";
export default {
  data() {
    return {
      orderNo1: this.$route.query.id, //传过来的订单号
      form: {
        name: "", //名称
        type: "", //创建时间
        type1: "", //收件人
        type2: "", //状态
        one: "", //一级分类
        two: "", //二级分类
        img: "", //图片
        img1: "",
      },
      tableData: [], //商品详情
    };
  },
  methods: {
    //获取接口数据
    orderList() {
      order2({ orderNo: this.$route.query.id }).then((res) => {
        console.log(res);
        this.tableData = res.data.data.orderItemVoList;
        console.log(this.tableData);
        this.form = {
          name: res.data.data.orderNo,
          type: res.data.data.createTime,
          type1: res.data.data.receiverName,
          type2: res.data.data.statusDesc,
          one: res.data.data.paymentTypeDesc,
          two: res.data.data.payment,
          img:res.data.data.imageHost,
        };
      });
    },
  },
  filters: {
    money(val) {
      return "￥" + val;
    },
  },
  created() {
    this.orderList();
  },
  mounted() {},
  components: {},
  computed: {},
  watch: {},
};
</script>

<style lang='scss' scoped>
.ipt {
  width: 40%;
}
</style>
